import React, { useEffect } from 'react';
//订单商品比例分布图
import * as echarts from 'echarts';
import '../sacc/Final.scss'
const Final = () => {
    useEffect(() => {
        var option = echarts.init(document.getElementById('fina') || document.body)
        option.setOption({
            title: {
                text: '订单商品比例分布图'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'right'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    // itemStyle: {
                    //     normal: {
                    //         color: function (colors: any) {
                    //             var colorList = [
                    //                 '#4ecb73',
                    //                 '#fbd437',
                    //                 '#f2637b',
                    //                 '#3aa1ff',
                    //                 '#36cbcb'
                    //             ];
                    //             return colorList[colors.dataIndex];
                    //         }
                    //     },

                    // },

                    radius: '50%',
                    data: [
                        { value: 1048, name: '耳机' },
                        { value: 735, name: '键盘' },
                        { value: 580, name: '音箱' },
                        { value: 484, name: '手机' },
                        { value: 300, name: '笔记本' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        })
    }, [])
    return (
        <div>
            <div id='fina'></div>
        </div>
    );
};

export default Final;